<template>
  <div class="user-header">
    <div class="center">
      <img @click="$router.push('/user')" src="../../assets/logo/logo4.png" style="height: 60px;cursor: pointer">
      <!--      <el-link class="link" @click="toGradeInquiry">成绩查询</el-link>-->
      <!--      <el-link class="link" >证书查询</el-link>-->
      <div class="user-info" v-show="username">
        <span v-if="" style="margin-right: 20px">欢迎您：{{username}}</span>
        <span></span>
        <i class="iconfont icon-tuichu"></i><span style="cursor: pointer;margin-left: 3px" @click="close">退出</span>
      </div>
    </div>
  </div>
</template>

<script>
  import Cookies from "js-cookie";
  export default {
    name: "index",
    props: {
    },
    methods:{
      //跳转登录
      toLogin(){
        this.$router.push('/login')
      },
      toRegister(){
        this.$router.push('/registration-agreement')
      },
      //跳往成绩查询界面
      toGradeInquiry(){
        this.$router.push('/grade');
      },
      toMymessage(){
        console.log('跳转至我的信息')
        this.$router.push('/user/myMessage')
      },
      close(){
        console.log('退出');
        Cookies.remove('token');
        this.$store.state.token = "";
        location.reload();
      }
    },
    created(){

    },
    computed:{
      username(){
        return this.$store.state.user_name
      }
    }
  }
</script>

<style>
  .user-header .el-link{
    margin-left: 20px;
    color: white;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: black;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>

<style scoped>
  .link{
    color: black;
  }
  .user-header .center{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    position: relative;
  }
  .user-header {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    background-color: #f7f7f7;
    box-shadow: 0 1px 0 0 rgba(0, 0 ,0,0.1);
    z-index: 10;
    color: black;
    text-align: left;
    display: flex;

  }

  .user-info {
    position: absolute;
    top: 35%;
    right: 0px;
    font-size: 14px;
  }
</style>
